<template>
  <div>
    <el-container class="admin-container">
      <el-aside class="admin-aside" width="15vw">
        <div class="admin-container-avatar">
          <el-avatar :size="200" :src="circleUrl">
          </el-avatar>
        </div>
        <div class="admin-container-name">
          {{ name }}
        </div>
        <div class="admin-container-welcome">
          你好，欢迎来到疫情申报管理系统
          {{ nowData }}
        </div>
        <div class="admin-container-button">
          <el-button class="admin-container-login-out" @click="loginOut()" icon="el-icon-s-home">&ensp;注&ensp;销
          </el-button>
        </div>
      </el-aside>
      <el-container class="admin-main">
        <el-header height="12vh" class="admin-header">
          <div class="admin-header-date">
            <el-date-picker
                v-model="search.search_date"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions" @change="searchByDate">
            </el-date-picker>
          </div>
          <div class="admin-header-school">
            <el-cascader
                v-model="search.school"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                style="width: 400px" @change="searchBySchool">
            </el-cascader>
          </div>
          <div class="admin-header-upload">
            <el-button type="primary" style="width:180px" @click="generateData">导出<i
                class="el-icon-upload el-icon--right"></i></el-button>
          </div>
          <div class="admin-header-upload">
            <el-button type="primary" style="width:180px" @click="changeTable">{{ button_info.title }}<i
                class="el-icon-upload el-icon--right"></i></el-button>
          </div>
        </el-header>
        <TableAll :record="record"
                  v-if="button_info.flag === 2"></TableAll>
        <TableNoHand :record="record"
                     v-if="button_info.flag === 1"></TableNoHand>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import TableAll from "./TableAll";
import TableNoHand from "./TableNoHand";
import axios from "axios";

export default {
  name: "Admin",
  components: {
    TableAll,
    TableNoHand,
  },
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      name: "林顿",
      nowData: "",
      record: [],
      search: {
        search_date: "",
        school: [],
      },
      //选择日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //选择学院
      options: [
        {
          value: '',
          label: '松山湖校区',
          children: [
            {
              value: '计算机科学与技术学院',
              label: '计算机科学与技术学院',
            },
            {
              value: '网络空间安全学院',
              label: '网络空间安全学院',
            },
            {
              value: '电子工程与智能化学院',
              label: '电子工程与智能化学院',
            },
            {
              value: '生态环境与建筑工程学院',
              label: '生态环境与建筑工程学院',
            },
            {
              value: '化学工程与能源技术学院',
              label: '化学工程与能源技术学院',
            },
            {
              value: '机械工程学院',
              label: '机械工程学院',
            },
            {
              value: '材料科学与工程学院',
              label: '材料科学与工程学院',
            },
            {
              value: '文学与传媒学院',
              label: '文学与传媒学院',
            },
            {
              value: '教育学院（师范学院）',
              label: '教育学院（师范学院）',
            }
          ]
        },
        {
          value: '',
          label: '莞城校区',
          children: [
            {
              value: '法律与社会工作学院',
              label: '法律与社会工作学院',
            },
            {
              value: '粤台产业科技学院',
              label: '粤台产业科技学院',
            },
            {
              value: '中法联合学院',
              label: '中法联合学院',
            }
          ]
        }
      ],
      //切换按钮的内容
      button_info: {
        flag: 1,
        title: '切换到已打卡统计',
      }
    }
  },
  methods: {
    //获取当前日期
    getNowData() {
      const nowData = new Date();
      const a = new Array("日", "一", "二", "三", "四", "五", "六");
      const date = {
        year: nowData.getFullYear(),
        month: nowData.getMonth() + 1,
        date: nowData.getDate(),
        week: nowData.getDay(),
      }
      this.nowData = date.year + '年' + date.month + '月' + date.date + '日/星期' + a[date.week];
      this.search.search_date = date.year + '-' + date.month + '-' + date.date
    },
    //通过日期查询
    searchByDate() {
      var _this = this;
      let date = this.search.search_date;
      this.search.search_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      if (this.button_info.flag === 1) {
        axios.post('/myapi/searchPersonInfoNoHand', {
          searchDate: this.search.search_date,
          searchSchool: this.search.school,
          flag: this.button_info.flag,//是查询哪一类操作，1为未打卡，2为已打卡
        }).then(function (response) {
          console.log(response);
          _this.record = response.data;
        }).then(function (error) {
          console.log(error);
        })
      } else if (this.button_info.flag === 2) {
        axios.post('/myapi/searchHanded', {
          searchDate: this.search.search_date,
          searchSchool: this.search.school,
          flag: this.button_info.flag,
        }).then(function (response) {
          console.log(response);
          _this.record = response.data;
        }).then(function (error) {
          console.log(error);
        })
      }
    },
    //通过学院查询
    searchBySchool() {
      var _this = this;
      if (_this.button_info.flag === 1) {
        axios.post('/myapi/searchPersonInfoNoHand', {
          searchDate: _this.search.search_date,
          searchSchool: _this.search.school,
          flag: _this.button_info.flag,
        }).then(function (response) {
          console.log(response);
          _this.record = response.data;
        }).then(function (error) {
          console.log(error);
        })
      } else if (_this.button_info.flag === 2) {
        axios.post('/myapi/searchHanded', {
          searchDate: _this.search.search_date,
          searchSchool: _this.search.school,
          flag: _this.button_info.flag,
        }).then(function (response) {
          console.log(response)
          _this.record = response.data;
        }).then(function (error) {
          console.log(error);
        })
      }
    },
    //导出打卡excel
    generate() {
      console.log(this.button_info.flag);
      var _url = ""
      if (this.button_info.flag === 2) {
        _url = '/myapi/admin/recordExcel'
      } else if (this.button_info.flag === 1) {
        _url = '/myapi/admin/userExcel'
      }

      axios(
          {
            method: 'post',
            url: _url,
            responseType:'blob',
            data:this.record,
          }
      ).then(function (response) {
        console.log(response)
        let blob = new Blob([response.data], {type: 'application/xlsx'})
        let url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = 'download.xlsx'
        link.click()
        URL.revokeObjectURL(url)
      }).then(function (error) {
        console.log(error);
      })

    },

    //导出打开excel前端
    generateData() {
      console.log(this.record)
      if (this.button_info.flag === 1){
        const{ export_json_to_excel} = require('@/vendor/Export2Excel');
        const tHeader = ['学号', '姓名', '学院','用户类型'];
        const filterVal = ["stuId","name","school","type"];
        const list = this.record;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader,data,'download_nohand')
      }else if(this.button_info.flag === 2){
        const{ export_json_to_excel} = require('@/vendor/Export2Excel');
        const tHeader = ['学号', '姓名', '学院','用户类型','填写日期','手机号码','身体状况','当前位置',
          '是否就医','是否为重点人群','是否接触过疑似/确诊病例','是否到达或途径重点地区','体温'];
        const filterVal = ["stu_id","name","school","type","date","phone","health","now_location",
          "see_doctor","important_person","contact","important_area","temp"];
        const list = this.record;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader,data,'download_hand')
      }

    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

    //登出
    loginOut() {
      this.$router.replace('/');
    },
    //判断是操作那一类数据
    changeTable() {
      const nowData = new Date();
      const date = {
        year: nowData.getFullYear(),
        month: nowData.getMonth() + 1,
        date: nowData.getDate(),
        week: nowData.getDay(),
      }
      if (this.button_info.flag === 1) {
        this.button_info.flag = 2;
        this.button_info.title = '切换到未打卡统计';
      } else if (this.button_info.flag === 2) {
        this.button_info.flag = 1;
        this.button_info.title = '切换到已打卡统计'
      }
      this.search.school = [];
      this.search.search_date = date.year + '-' + date.month + '-' + date.date;
      this.record = [];
    },
  },
  mounted() {
    this.getNowData();
  },
  created() {
    this.name = JSON.parse(window.localStorage.getItem('Info')).name;
  }
}
</script>

<style scoped>

.admin-header-upload {
  float: left;
  height: 100%;
  width: 12%;
  padding-top: 38px;
  margin-right: 60px;
  text-align: center;
}

.admin-header-date {
  float: left;
  height: 100%;
  width: 24%;
  padding-top: 38px;
  text-align: center;
}

.admin-header-school {
  float: left;
  height: 100%;
  width: 40%;
  padding-top: 38px;
  text-align: center;
}

.admin-container {
  margin: 0;
  height: 100vh;
}

.admin-aside {
  background: #428675;
}

.admin-main {
  background: #eeeeee;
}

.admin-header {
  background: #545c64;
}

.admin-container-avatar {
  text-align: center;
  padding-top: 90px;
}

.admin-container-name {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  color: #f1f0ed;
  text-align: center;
  padding-top: 25px;
}

.admin-container-welcome {
  width: 100%;
  font-size: 17px;
  line-height: 30px;
  font-weight: 600;
  color: #363433;
  text-align: center;
  padding-top: 15px;
}

.admin-container-button {
  width: 100%;
  text-align: center;
  padding-top: 50px;
}

.admin-container-login-out {
  width: 74%;
  height: 45px;
  font-size: 16px;
  font-weight: 700;
  background-color: #229453;
  color: #f1f0ed;
  border: 3px solid #20894d;
}


</style>